<template>
	<view>
		<view class="feedback-wrapper">
			<view class="feedback-box1">
				<view class="feedback-top">填写问题或建议<text class="bitian">(必填)</text><text class="xinghao">*</text></view>
				<u--textarea v-model.trim="content" class="feedback-text" placeholder="请填写尽量详细的问题描述，以便我们为您提供更好的帮助"
					height="120" count maxlength='150'></u--textarea>
			</view>
			<view class="feedback-box1">
				<view class="feedback-top feedback-top_tpsc">
					<view>图片上传<text class="bitian">（选填，上传截图便于定位问题）</text></view>
					<view class="tpsc_num"><text>{{fileList1.length}}</text>/3</view>
				</view>
				<view class="feedback-upload">
					<view class="upload-box">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="3" width="160rpx" height="160rpx">
							<image src="https://img.bidcenter.com.cn/uni/user/sctp.png" mode="widthFix"
								style="width: 160rpx;height: 160rpx;border: 1px dashed #ddd;"></image>
						</u-upload>
					</view>
				</view>
			</view>
			<view class="address-btn" :class="content.length >3 ? 'address-btn-active' : '' " @click="sumbit()">提交</view>
		</view>
	</view>
</template>

<script>
// import list from '../../../uni_modules/uview-ui/libs/config/props/list';

	export default {
		data() {
			return {
				content: '',
				fileList1: [],
				ossInfo: {
					accessid: '',
					dir: '',
					expire: 1585653811,
					host: '',
					policy: '',
					signature: ''
					
				},
				getSync:'',
				getSyncText:'',
				newFilelist:[]
			};
		},
		created() {
			
		},
		onLoad(options) {
			this.send_request();
			this.getSync = uni.getStorageSync('feedback')
			this.getSyncText = this.getSync
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.newFilelist = this.fileList1
			},
			afterRead(event) {
				console.log(event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item
					});
				});
				for (let i = 0; i < lists.length; i++) {
					this.uploadFilePromise(lists[i].url, this.ossInfo);
				}
			},
			uploadFilePromise(url, oss) {
				let filepath = '';
				filepath = oss.dir + this.random_string(10) + '.png'
				//获取图片的数据插入到upload中
				uni.uploadFile({
					url: oss.host,
					filePath: url,
					name: 'file',
					formData: {
						key: filepath,
						policy: oss.policy,
						host: oss.host,
						OSSAccessKeyId: oss.accessid,
						success_action_status: '200',
						Signature: oss.signature
					},
					success: (uploadFileRes) => {
						uni.$u.http
							.post('wechat/aliyun/AliyunOssUploadHandler.ashx', {
								userid: 5441017,
								uftitle: '功能反馈',
								oldname: '功能反馈',
								uftype: 7008,
								size: 10240,
								upath: filepath
							})
							.then(rs => {
								const newsList = JSON.parse(JSON.stringify(this.newFilelist));
								newsList.push({
									url:url,
									serverUrl:rs.upload_url
								})
								this.newFilelist = newsList
								uni.$u.toast('上传成功');
								
				
							})
							.catch(err => {
								uni.$u.toast(err.msg || '接口异常');
							});
					},
					fail: res => {
						console.log('fail', res);
					}
				});
			},
			random_string(len) {
				len = len || 32;
				var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
				var maxPos = chars.length;
				var pwd = '';
				for (var i = 0; i < len; i++) {
					pwd += chars.charAt(Math.floor(Math.random() * maxPos));
				}
				return pwd;
			},
			send_request() {
				uni.$u.http
					.post('wechat/aliyun/AliyunOssWebSignatureHandler.ashx', {
						type: 7008
					})
					.then(rs => {
						this.ossInfo.host = rs.host;
						this.ossInfo.policy = rs.policy;
						this.ossInfo.accessid = rs.accessid;
						this.ossInfo.signature = rs.signature;
						this.ossInfo.expire = rs.expire;
						this.ossInfo.dir = rs.dir;
						console.log(this.ossInfo);
					})
					.catch(err => {
						uni.$u.toast(err.msg || '接口异常');
					});
			},
			sumbit(){
				
				this.content = this.content.replace(/[, ]/g,'')
				if(this.content==''){
					this.$u.toast('反馈内容不能为空')
					return
				}
				if(this.content.length<3){
					this.$u.toast('您输入的内容太少了，请填写的尽量详细些！')
					return
				}
				const arr = []
				this.newFilelist.map(item =>{
					arr.push(item.serverUrl)
				})
				if(this.content == this.getSyncText){
					this.$u.toast('您已提交过此信息，请勿重复提交！')
					return
				}
				// 用于测试
				let contentText = '';
				const localData = uni.getStorageSync('uni_local_data')
				if(uni.$u.trim(this.content,'all').includes('协助测试')){
					contentText = this.content+'='+ JSON.stringify(localData);
				}else{
					contentText = this.content;
				}
				
				const params = Object.assign({}, {
					content:contentText,
					files:arr.join(','),
					location:8063
				})
				
				uni.$u.http
					.post('/user/question/FeedbackHandler.ashx', params)
					.then(rs => {
						uni.$u.toast('感谢您的建议，我们会不断改进');
						uni.setStorageSync('feedback', contentText)
						uni.switchTab({
							url:'/pages/user/user'
						})
					})
					.catch(err => {
						uni.$u.toast(err.msg);
					});
				
			}
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #fafafa;
	}

	.feedback-wrapper {
		margin-top: 15rpx;
		padding-bottom: 30rpx;
	}

	.feedback-box1 {
		padding: 30rpx 30rpx 0;

		.feedback-top {
			font-size: 32rpx;
			color: #3B3E45;
			margin-bottom: 28rpx;

			.bitian {
				color: #ADB4C2;
				font-size: 24rpx;
			}

			.xinghao {
				font-size: 24rpx;
				color: #FE2B2B;
			}
		}

		.feedback-text {
			padding: 20rpx;
			border-radius: 8rpx;
			border: 1px solid #BFBFBF;

			.uni-textarea-placeholder {
				font-size: 24rpx;
			}
		}
	}

	.feedback-upload {
		display: flex;
		align-items: center;

		.upload-box {}

		.upload-text {
			color: #9a9a9a;
			font-size: 28rpx;
			display: flex;
			margin-left: 20rpx;
		}
	}

	.upload-file {
		position: relative;
		top: 0;

		.file-box {
			width: 100rpx;
			height: 100rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}

		.file-img {
			width: 100rpx;
			height: 100rpx;
		}

		.file-close {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: -15rpx;
			right: -30rpx;
		}
	}

	.address-btn {
		background-color: #e7e7e7;
		height: 98rpx;
		line-height: 98rpx;
		background: #C9CED8;
		border-radius: 4rpx;
		text-align: center;
		margin: 30rpx 30rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.address-btn-active {
		background: linear-gradient(90deg, #1F91FF 0%, #1D11FB 100%);
		box-shadow: 0rpx 6rpx 24rpx 4rpx rgba(47, 143, 254, 0.3);
	}

	.feedback-top_tpsc {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tpsc_num {
			font-size: 32rpx;
			color: #ADB4C2;
		}
	}
</style>